
import React, { useState, useEffect } from 'react'
import Shooping from '../../../../static/img/shop.png'
import './index.css'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { aUrl } from '../../../../static/axios_url';
import { message } from 'antd';
export default function ShopMan() {
    let navigate = useNavigate();
    const [data, setData] = useState([])
    useEffect(() => {
        //获取购物车信息
        axios.post(aUrl + '/shopcar/shopcarData', {
            u_id: 1,
        }).then(res => {
            let data = res.data
            //为每个data数组 加入一个zj = 0的属性值
            for (var i = 0; i < data.length; i++) {
                data[i].zj = 0
                //为每个data.good数组 加入一个onF = false的属性值
                for (var j = 0; j < data[i].good.length; j++) {
                    data[i].good[j].onF = false
                }
            }
            setData(data)
        })
    }, [])
    let dpInp = document.getElementsByClassName('sm-p-inp')
    let oInpall = document.getElementsByTagName('input')
    //去确认订单信息页面
    function goOrdermag() {
        let newData = [...data]
        let shopmags = []
        for (var i = 0; i < oInpall.length; i++) {
            if (oInpall[i].checked === true && oInpall[i].value !== 'on') {
                //根据input框的value值获取对应的商店的id和商品的id  然后获取商品的id:car_id和商品的数量:g_num
                //将商品的id 数量 转换成[{},{}...]形式发给后台
                shopmags.push({
                    car_id: newData[oInpall[i].value.substr(0, 1) * 1].good[oInpall[i].value.substr(2) * 1].car_id,//value.substr(2) * 1  字符串隐式转换为数字
                    g_num: newData[oInpall[i].value.substr(0, 1) * 1].good[oInpall[i].value.substr(2) * 1].g_num
                })
            }
        }
        //将选中的商品发给后台  成功后跳转到确认订单信息页面
        axios.post(aUrl + '/shopcar/updateShopcar', {
            updateArr: shopmags
        }).then(res => {
            if (res.data.code === 1) {
                message.success('提交成功')
                navigate('ordermag/shippmag')
            }
        })
    }

    //店铺商品单选
    function shopInp(i_mag, i_data) {
        return () => {
            let oInp = document.getElementsByClassName('sm-ul-li-input' + i_mag)
            let newData = [...data]

            //商品onF值取反
            newData[i_mag].good[i_data].onF = !newData[i_mag].good[i_data].onF
            setData(newData)

            if (oInp[i_data].checked === true) {
                //商品信息被勾选时 将商品金额加入到店铺金额中
                newData[i_mag].zj = newData[i_mag].zj + newData[i_mag].good[i_data].g_num * newData[i_mag].good[i_data].new_price * 1
                setData(newData)
            } else {
                //商品信息未被勾选时 将商品金额从店铺金额中去除
                newData[i_mag].zj = newData[i_mag].zj - newData[i_mag].good[i_data].g_num * newData[i_mag].good[i_data].new_price * 1
                setData(newData)
            }

            //判断商品信息选择框选择时 店铺总选按钮是否选中
            for (var i = 0; i < oInp.length; i++) {
                if (oInp[i].checked === false) {
                    dpInp[i_mag].checked = false
                    return
                } else {
                    dpInp[i_mag].checked = true
                }
            }
        }
    }

    //店铺全选按钮
    function shopAllinp(i_mag) {
        return () => {
            let oInp = document.getElementsByClassName('sm-ul-li-input' + i_mag)
            let newData = [...data]
            if (dpInp[i_mag].checked === false) {
                //店铺全选框未选中时 
                for (var i = 0; i < oInp.length; i++) {
                    newData[i_mag].good[i].onF = false  //商品onF值取反
                    oInp[i].checked = false  //让店铺下边的商品信息选择框都不选中
                    newData[i_mag].zj = 0  //让店铺总金额为0
                }
            } else {
                newData[i_mag].zj = 0  //让店铺总金额为0
                //店铺全选框选中时
                for (var i = 0; i < oInp.length; i++) {
                    newData[i_mag].good[i].onF = true  //商品onF值取反
                    oInp[i].checked = true  //让店铺下边的商品信息选择框都选中
                    newData[i_mag].zj += newData[i_mag].good[i].g_num * newData[i_mag].good[i].new_price * 1  //店铺的总金额计算
                }
            }
            setData(newData)
        }
    }

    //总体全选按钮
    function checkedAll() {
        let newData = [...data]
        //商品onF取反
        for (var i = 0; i < newData.length; i++) {
            for (var j = 0; j < newData[i].good.length; j++) {
                newData[i].good[j].onF = !newData[i].good[j].onF
            }
        }

        for (var i = 0; i < oInpall.length; i++) {
            //如果有一个input未选中 让input框都为true
            if (oInpall[i].checked === false) {
                for (var j = 0; j < oInpall.length; j++) {
                    oInpall[j].checked = true
                }
                //计算对应店铺总金额
                for (var a = 0; a < newData.length; a++) {
                    //让所有店铺总金额 zj= 0
                    newData[a].zj = 0
                    //让店铺总金额为所有店铺下的商品金额之和
                    for (var b = 0; b < newData[a].good.length; b++) {
                        newData[a].zj += newData[a].good[b].g_num * newData[a].good[b].new_price * 1
                    }
                }
                setData(newData)
                return
            } else if (i === oInpall.length - 1) {
                for (var j = 0; j < oInpall.length; j++) {
                    oInpall[j].checked = false
                }
                for (var a = 0; a < newData.length; a++) {
                    newData[a].zj = 0   //让店铺总金额都为0
                }
                setData(newData)
                return
            }
        }
    }

    //添加商品数量
    function shopAdd(i_mag, i_data) {
        return () => {
            let newData = [...data]
            let oInp = document.getElementsByClassName('sm-ul-li-input' + i_mag)
            //商品信息框选中时 数量变化时店铺金额随着数量变化而变化
            if (oInp[i_data].checked === true) {
                //如果商品信息是选中状态 商品数量会变化(金额是data.new_price*1 * data.shul也随之变化) 店铺金额也会随之变化
                newData[i_mag].good[i_data].g_num++  //商品数量会变化
                setData(newData)
                newData[i_mag].zj = newData[i_mag].zj + newData[i_mag].good[i_data].new_price * 1  //店铺总金额随之变化
                setData(newData)
            } else {
                //如果商品信息如果不是选中状态 商品数量会变化(金额是data.new_price*1 * data.shul也随之变化)
                newData[i_mag].good[i_data].g_num++  //商品数量会变化
                setData(newData)
            }
        }
    }
    //减少商品数量
    function shopSub(i_mag, i_data) {
        return () => {
            let newData = [...data]
            let oInp = document.getElementsByClassName('sm-ul-li-input' + i_mag)
            if (oInp[i_data].checked === true) {
                if (newData[i_mag].good[i_data].g_num > 0) {
                    //如果商品信息是选中状态 数量>0 商品数量会变化(金额是data.new_price*1 * data.shul也随之变化) 店铺金额也会随之变化
                    newData[i_mag].good[i_data].g_num--  //商品数量会变化
                    newData[i_mag].zj = newData[i_mag].zj - newData[i_mag].good[i_data].new_price * 1   //店铺总金额随之变化
                }
                setData(newData)
            } else {
                if (newData[i_mag].good[i_data].g_num > 0) {
                    //如果商品信息如果不是选中状态 数量>0 商品金额会变化 店铺总金额不会随之变化
                    newData[i_mag].good[i_data].g_num--  //商品数量会变化
                    setData(newData)
                }
            }
        }
    }

    //删除信息
    function magDel(i_mag, i_data, delid) {
        return () => {
            axios.post(aUrl + '/shopcar/delShopcar', {
                car_id: delid,
            }).then(res => {
                if (res.data.code === 1) {
                    message.success('删除成功')
                    let newData = [...data]
                    var oInp = document.getElementsByClassName('sm-ul-li-input' + i_mag)

                    //删除后如果商品信息全选 店铺信息也全选
                    let num = 0;
                    for (var i = 0; i < oInp.length; i++) {
                        if (oInp[i].checked === true) {
                            num++
                        }
                    }
                    if (oInp.length - 1 === num) {
                        dpInp[i_mag].checked = true
                    }

                    //删除数据时  商铺总金额跟着变化
                    if (oInp[i_data].checked === true) {
                        //如果商品信息表是选中状态 更改店铺总金额
                        newData[i_mag].zj = newData[i_mag].zj - newData[i_mag].good[i_data].g_num * newData[i_mag].good[i_data].new_price * 1
                    }

                    //删除对应数据
                    newData[i_mag].good.splice(i_data, 1)
                    if (newData[i_mag].good.length === 0) {
                        //如果店铺内商品全删完  商铺信息也删除
                        newData.splice(i_mag, 1)
                    }
                    setData(newData)
                }
            })
        }
    }

    //批量删除
    function magDelall() {
        let newData = [...data]
        let delarr = []
        //收集需要删除的数据
        for (var i = 0; i < oInpall.length; i++) {
            if (oInpall[i].checked === true && oInpall[i].value !== 'on') {
                //根据input框的value值获取对应的商店的id和商品的id  然后获取商品的car_id 添加到要删除的数组中
                delarr.push(newData[oInpall[i].value.substr(0, 1) * 1].good[oInpall[i].value.substr(2) * 1].car_id)
            }
        }
        // console.log(delarr);
        axios.post(aUrl + '/shopcar/delsShopcar', {
            delarr
        }).then(res => {
            if (res.data.code === 1) {
                message.success('删除成功')
                //遍历所有信息 如果是选中状态 删除对应数据
                for (var i = 0; i < newData.length; i++) {
                    for (var j = 0; j < newData[i].good.length; j++) {
                        if (newData[i].good[j].onF === true) {
                            newData[i].zj = newData[i].zj - newData[i].good[j].g_num * newData[i].good[j].new_price * 1
                            newData[i].good.splice(j, 1)
                            j--
                        }
                    }
                }
                //删除后让所有复选框为false
                for (var i = 0; i < oInpall.length; i++) {
                    oInpall[i].checked = false
                }
                //如果店铺内商品全删完  商铺信息也删除
                for (var i = 0; i < newData.length; i++) {
                    if (newData[i].good.length === 0) {
                        newData.splice(i, 1)
                        i--
                    }
                }
                setData(newData)
            }
        })
    }

    //所有商品的总金额
    const [allzj, setAllzj] = useState(0)
    useEffect(() => {
        let all = 0
        //所有店铺总金额求和
        for (var i = 0; i < data.length; i++) {
            all += data[i].zj
        }
        setAllzj(all)
    }, [data])//监听商品信息是否发生变化

    return (
        <div id='shopman'>
            <div className='sm-gwc'>
                <img src={Shooping} style={{ width: '22px', height: '20px' }} alt="" />  购物车
            </div>
            <div className='sm-main'>

                {data.map((mag, i_mag) => {
                    return (
                        <div key={i_mag} className='sm-main-mag'>
                            <p><input className='sm-p-inp' onClick={shopAllinp(i_mag)} type="checkbox" /><em>{mag.name}</em><span>规格</span><span>单价</span><span>数量</span><span>金额</span><span>操作</span></p>
                            <ul>
                                {mag.good.map((data, i_data) => {
                                    return (
                                        <li key={i_data}>
                                            <input value={i_mag + ',' + i_data} onClick={shopInp(i_mag, i_data)} className={'sm-ul-li-input' + i_mag} type="checkbox" />
                                            <i><img src={data.img} alt="" /></i>
                                            <em>{data.title}</em>
                                            <span>{data.g_g}</span>
                                            <span>￥:{data.new_price * 1}</span>
                                            <span className='sm-count'>
                                                <button onClick={shopSub(i_mag, i_data)}>-</button>
                                                <u>{data.g_num}</u>
                                                <button onClick={shopAdd(i_mag, i_data)}>+</button>
                                            </span>
                                            <span>￥:<i>{(data.new_price * 1 * data.g_num).toFixed(2)}</i></span>
                                            <span onClick={magDel(i_mag, i_data, data.car_id)}>删除</span>
                                        </li>
                                    )
                                })}
                            </ul>
                            <div className='sm-main-foot'>商品金额 <span>￥{mag.zj}</span></div>
                        </div>
                    )
                })}
                <div className='sm-footer'>
                    <span className='sm-inpall' onClick={checkedAll}>全选</span>
                    <span onClick={magDelall}>批量删除</span>
                    <div className='sm-footer-gm'>商品总计:<i>￥{allzj}</i><button onClick={goOrdermag}>立即购买</button></div>
                </div>
            </div>
        </div>
    )
}
